<template>
	<div class="index">
		<topheader></topheader>
		<div class="cont">
			<el-col :span="1">
				1
			</el-col>
			<el-col :span="11">
				<div class="orderlist">
					<div class="invoice">
						<div class="content" id="content">
							<div class="order_title">
								<span>销售单</span>
								<div class="order_title_time">
									<span style="float: left;margin-left:;">客户：18888</span>
									<span style="float: right;">{{now_date}}</span>
								</div>
								<div class="order_table" style="margin-top: 10px;">
									<el-table :data="tableData3" height="356" type="index" border highlight-current-row @current-change="handleCurrentChange" style="width: 620px;">
										<el-table-column label="项" width="35" type="index">
										</el-table-column>
										<el-table-column prop="goods_name" width="369" label="名称及规格">
										</el-table-column>
										<el-table-column prop="dawei" label="单位" width="60">
										</el-table-column>
										<el-table-column prop="goods_number" label="数量" width="60">
										</el-table-column>
										<el-table-column prop="shop_price" label="价格(￥)" width="75">
										</el-table-column>
									</el-table>
								</div>
							</div>
							<div class="zsg_list">
								<div class="price_nubmer">
									<div class="hj_nubmer">
										<span>合计:</span>
										<span style="color: red;font-size: 25px;">{{totanumber}}</span>
										<span>{{danwei}}</span>
									</div>
									<div class="hj_price">
										<span>￥{{totalprice}}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="11">
				<div class="pay_cont">
					<div class="pay_c_top">
						<div class="pay_c_top_left">
							<div class="pay_c_top_ul">
								<li>
									<span style="font-size: 18px; color: red;">应付金额</span><span style="font-size: 18px; color: red;">￥{{endprice}}</span>
								</li>
								<li>
									<span>商品总额</span><span>￥{{totalprice}}</span>
								</li>
								<li>
									<span>优惠金额</span><span>￥{{yhprice}}</span>
								</li>
								<li>
									<!--<el-input v-model="shifu" placeholder="请输入内容"  v-on:change="payamount()" @keydown="show($event)" ></el-input>-->
									<span>实付金额</span><span><input class="shifuinput" v-model="shifu"  v-on:input="payamount()" placeholder="0" type="number"></input></span>
								</li>
								<li>
									<span>找零</span><span>￥{{backmoney}}</span>
								</li>
							</div>
						</div>
						<div class="pay_c_top_right">
							<div class="pay_c_top_btn" v-on:click="payment(data.code,index,data.paymen_id)" v-for="(data,index) in paytypelist">
								{{data.name}}
							</div>
						</div>
					</div>
					<div class="pay_c_bottom">
						<div class="pay_c_bottom_number">
							<div class="pay_c_one">
								<div class="pay_c_btn" style="border-bottom: 1px solid rgba(255,255,255,0.3);" v-on:click="keycode(1)">1</div>
								<div class="pay_c_btn" style="border-bottom: 1px solid rgba(255,255,255,0.3);" v-on:click="keycode(4)">4</div>
								<div class="pay_c_btn" style="border-bottom: 1px solid rgba(255,255,255,0.5);" v-on:click="keycode(7)">7</div>
								<div class="pay_c_btn" v-on:click="keycode('.')">.</div>
							</div>
							<div class="pay_c_one">
								<div class="pay_c_btn" style="border-bottom: 1px solid rgba(255,255,255,0.3);" v-on:click="keycode(2)">2</div>
								<div class="pay_c_btn" style="border-bottom: 1px solid rgba(255,255,255,0.3);" v-on:click="keycode(5)">5</div>
								<div class="pay_c_btn" style="border-bottom: 1px solid rgba(255,255,255,0.3);" v-on:click="keycode(8)">8</div>
								<div class="pay_c_btn" v-on:click="keycode(0)">0</div>
							</div>
							<div class="pay_c_one">
								<div class="pay_c_btn" style="border-bottom: 1px solid rgba(255,255,255,0.3);" v-on:click="keycode(3)">3</div>
								<div class="pay_c_btn" style="border-bottom: 1px solid rgba(255,255,255,0.3);" v-on:click="keycode(6)">6</div>
								<div class="pay_c_btn" style="border-bottom: 1px solid rgba(255,255,255,0.3);" v-on:click="keycode(9)">9</div>
								<div class="pay_c_btn">x</div>
							</div>
							<div class="pay_c_one" style="border: none;">
								<div class="pay_c_btn" style="border-bottom: 1px solid rgba(255,255,255,0.3);">去零</div>
								<div class="pay_c_btns" v-on:click="zhifufun">结算</div>
							</div>
						</div>
					</div>
					<div class="pay_c_zhekou">
						<div class="pay_bottom_right">
							<div class="od_btn_clear od_btn" @click="open4">整单打折</div>
							<div class="od_btn_gu od_btn" @click="open5">总价减免</div>
							<div class="od_btn_gu od_btn" @click="dayin">打印客户联</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="1">

			</el-col>
			<div v-show="xiaopiao" id="xiaopiao">
				<div class="content" id="content">
					<div class="order_title">
						<span>销售单</span>
						<div class="order_title_time">
							<span style="float: left;margin-left:;">客户：18888</span>
							<span style="float: right;">{{now_date}}</span>
						</div>
						<div class="order_table" style="margin-top: 10px;">
							<el-table :data="tableData3" height="356" type="index" border highlight-current-row @current-change="handleCurrentChange" style="width: 250px;">
								<el-table-column label="项" width="20" type="index">
								</el-table-column>
								<el-table-column prop="goods_name" width="75" label="名称及规格">
								</el-table-column>
								<el-table-column prop="dawei" label="单位" width="25">
								</el-table-column>
								<el-table-column prop="goods_number" label="数量" width="25">
								</el-table-column>
								<el-table-column prop="shop_price" label="价格(￥)" width="55">
								</el-table-column>
							</el-table>
						</div>
					</div>
					<div class="zsg_list">
						<div class="price_nubmer">
							<div class="hj_nubmer">
								<span>合计:</span>
								<span style="color: red;font-size: 25px;">{{totanumber}}</span>
								<span>{{danwei}}</span>
							</div>
							<div class="hj_price">
								<span>￥{{totalprice}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import Topheader from '../public/header.vue' //引入组件
	export default {
		components: {
			"topheader": Topheader
		},
		data() {
			return {
				xiaopiao: false,
				paytypelist: '', // 支付列表
				order_sn: '', // 订单号
				yhprice: 0.00, //优惠金额
				payorder: '', //支付订单
				paymenttype: '', // 
				totanumber: '', //一共几项
				totalprice: '', //总价
				danwei: '', // 单位
				now_date: '', // 当前时间
				tableData3: [],
				shifu: 0, // 实付金额
				endprice: '', // 最后订单价格
				backmoney: '', //找回价
				zhekou: '', //折扣
				jianmian: '', //减免金额
				input5: '',
				numberarr: [], //点击按钮加入数组
				numberobj: '', //数组转成字符串
				paymen_id: '', //支付方式id
				code: '', //支付方式代码
				username: ''
			};
		},
		mounted() {
			this.onload();
			this.getpaylist();
		},
		methods: {
			show: function(ev) {
				//				this.payamount();
				if(ev.keyCode == 13) {
					
				}
			},
			dayin: function() {
				this.xiaopiao = true;
			},
			//模拟键盘事件
			keycode: function(key) {

			},
			onload: function() {
				this.order_sn = this.getCookie("order_sn"); //uin
				this.uin = this.getCookie("uin"); //uin
				this.token = this.getCookie("token"); //tokens
				this.shop_id = this.getCookie("shop_id"); //shop_id
				var aut = this.uin + "#" + this.token;
				//获取全部颜色列表
				this.$http.get('/test/public/index.php/cash/order_detail.qdy?order_sn=' + this.order_sn + '&admin_uin=' + this.uin + '', {
					headers: {
						'Authorizations': aut
					},
					emulateJSON: true
				}).then(function(data) {
					console.log(data.data.data.goods_list);
					this.tableData3 = data.data.data.goods_list;
					this.totanumber = this.tableData3.length;
					this.username = this.getCookie("username");
					this.count();
					this.jsendprice();
				})

			},
			// 获取支付方式列表
			getpaylist: function() {
				var aut = this.uin + "#" + this.token;
				this.$http.get('/test/public/index.php/cash/payment_list.qdy?shop_id=' + this.shop_id + '', {
					headers: {
						'Authorizations': aut
					},
					emulateJSON: true
				}).then(function(data) {
					this.paytypelist = data.data.data;
				})
			},
			payment: function(type, index, payment_id) {
				this.paymenttype = type;
				this.payment_id = payment_id;
				for(var i = 0; i < document.getElementsByClassName("pay_c_top_btn").length; i++) {
					document.querySelectorAll(".pay_c_top_btn")[i].style.backgroundColor = "rgba(255,255,255,0.1)";
				}
				document.querySelectorAll(".pay_c_top_btn")[index].style.backgroundColor = "rgba(255,255,255,0.5)";
				switch(type) {
					case 'weixinpay':
						console.log("微信");
						break;
					case 'cash':
						console.log("现金");
						break;
					case 'AliPay':
						console.log("支付宝");
						break;
				}
			},
			//支付接口
			zhifufun: function() {
				if(this.paymenttype == null || this.paymenttype == '') {
					this.open2("请选择支付方式");
				} else if(this.shifu == null || this.shifu == '') {
					this.open2("实付款不能为空");
				} else if(this.backmoney <= 0) {
					this.open2("计算错误，无法支付");
				} else {
					this.order_sn = this.getCookie("order_sn"); //uin
					this.uin = this.getCookie("uin"); //uin
					this.token = this.getCookie("token"); //tokens
					this.shop_id = this.getCookie("shop_id"); //shop_id
					var aut = this.uin + "#" + this.token;
					//获取全部颜色列表
					this.$http.get('/test/public/index.php/cash/pay.qdy?admin_uin=' + this.uin + '&order_sn=' + this.order_sn + '&paymen_id=' + this.payment_id + '&code=' + this.paymenttype + '', {
						headers: {
							'Authorizations': aut
						},
						emulateJSON: true
					}).then(function(data) {
						this.open3("支付成功");
						console.log(data.data.data);
					})
				}
			},
			//算应付金额
			jsendprice: function() {
				this.endprice = parseFloat(this.totalprice) - parseFloat(this.yhprice);
				this.payamount();
			},
			//输入实付金额 
			payamount: function() {
				if(this.shifu == null || this.shifu == '') {
					console.log(this.shifu);

				} else {
					this.backmoney = parseFloat(parseFloat(this.shifu).toFixed(2) - parseFloat(this.endprice).toFixed(2));
				}
			},
			// （打折）算优惠金额
			youhuifun: function() {
				this.yhprice = parseFloat(parseFloat(this.totalprice) * (10 - this.zhekou) / 10).toFixed(2);
				this.jsendprice();
			},
			//计算价格
			count: function() {
				this.totalarr = [];
				//数组求和
				function sum(arr) {
					var s = 0;
					for(var i = arr.length - 1; i >= 0; i--) {
						s += arr[i];
					}
					return s;
				}
				//乘法
				function accMul(arg1, arg2) {
					var m = 0,
						s1 = arg1.toString(),
						s2 = arg2.toString();
					try {
						m += s1.split(".")[1].length
					} catch(e) {}
					try {
						m += s2.split(".")[1].length
					} catch(e) {}
					return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
				}
				for(var i = 0; i < this.tableData3.length; i++) {
					this.totalarr.push(accMul(this.tableData3[i].goods_number, this.tableData3[i].shop_price));
				}
				this.totalprice = sum(this.totalarr);
			},
			open2: function(txt) {
				this.$notify({
					title: txt,
					duration: 2000,
					message: txt,
					type: 'warning'
				});
			},
			open3: function(txt) {
				this.$notify({
					title: txt,
					duration: 2000,
					message: txt,
					type: 'success'
				});
			},
			//打折
			open4() {
				this.$prompt('如8.8折/写入8.8', '整单打折', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /^(\d|10)(\.\d)?$/,
					inputErrorMessage: '打折格式不正确'
				}).then(({
					value
				}) => {
					this.$message({
						type: 'success',
						message: '订单折扣为: ' + value,
					});
					this.zhekou = value;
					this.youhuifun();
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					});
				});
			},
			//减免
			open5() {
				this.$prompt('如满100减10/写入10', '总价减免', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /^[0-9]*$/,
					inputErrorMessage: '减免格式不正确'
				}).then(({
					value
				}) => {
					this.$message({
						type: 'success',
						message: '减免金额为: ' + value,
					});
					this.yhprice = value;
					this.jsendprice();
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					});
				});
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			//点击选中
			handleCurrentChange(val) {
				console.log(val)
				this.currentRow = val;
			},
			//删除
			setorderfun: function() {

			},
			//返回开单
			set_order: function() {
				this.$router.push({
					path: '/'
				})
			},
			//读取cookie
			getCookie: function(cname) {
				var name = cname + "=";
				var ca = document.cookie.split(';');
				for(var i = 0; i < ca.length; i++) {
					var c = ca[i];
					while(c.charAt(0) == ' ') c = c.substring(1);
					if(c.indexOf(name) != -1) return c.substring(name.length, c.length);
				}
				return "";
			}
		}
	}
</script>
<style>
	.shifuinput {
		width: 120px;
		height: 30px;
		border: none;
		text-align: center;
		outline: none
	}
	
	.orderlist {
		position: relative;
		top: 0px;
		left: -500px;
		overflow: hidden;
		animation: orderlist 0.5s forwards;
	}
	
	@keyframes orderlist {
		from {
			left: -500px;
		}
		to {
			left: 0px;
		}
	}
	
	.setorderbtn {
		width: 80%;
		height: 50px;
		-webkit-box-shadow: inset 0 0 20px white;
		-moz-box-shadow: inset 0 0 20px white;
		box-shadow: inset 0 0 20px white;
		margin-left: 10%;
		color: white;
		font-size: 14px;
		text-align: center;
		line-height: 50px;
		margin-top: 15px;
		cursor: pointer;
	}
	
	.setorderbtn:hover {
		-webkit-box-shadow: inset 0 0 10px white;
		-moz-box-shadow: inset 0 0 10px white;
		box-shadow: inset 0 0 10px white;
	}
	
	.header>ul {
		border: none;
	}
	
	.setorder>.el-button--success {
		height: 50px;
		width: 80%;
		margin-top: 15px;
	}
	
	.fenyebtn {
		overflow: hidden;
		width: 100%;
		padding-top: 30px;
	}
	
	.goodslist {
		height: 380px;
		overflow: hidden;
	}
	
	.goodslist>.goodsli {
		float: left;
		margin: 5px 1%;
		width: 18%;
		height: 180px;
		background-color: #F2F2F2;
		border-radius: 5px;
		position: relative;
		background-color: white;
	}
	
	.el-input-group--append,
	.el-input__inner {
		height: 60px;
	}
	
	.el-select .el-input {
		width: 130px;
	}
	
	.input-with-select .el-input-group__prepend {
		background-color: #fff;
	}
	
	.cont {
		overflow: hidden;
	}
	/*.is-active:hover {
		background-color: #067CF8;
	}*/
	
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		position: fixed;
		top: 0px;
		height: 100%;
		z-index: 10;
	}
	
	.el-menu-item span,
	.el-menu-item i {
		color: white;
	}
	
	.cashlogo {
		font-size: 40px;
		color: white;
		text-align: center;
		float: left;
		margin-left: 50px;
		margin-right: 50px;
		line-height: 80px;
	}
	
	.navbtn {
		float: right;
		margin-right: 50px;
		overflow: hidden;
	}
	
	.navbtn>li {
		float: left;
		width: 120px;
		height: 80px;
		line-height: 80px;
		color: white;
		font-size: 14px;
	}
	
	.navbtn>li:hover {
		/*font-size: 18px;*/
		background-color: rgba(0, 0, 0, 0);
	}
	
	.el-submenu__title {
		height: 80px;
		line-height: 80px;
		padding: 0 30px;
	}
	
	.el-submenu__title i {
		color: white;
	}
	
	.el-menu-item {
		padding: 0 30px;
	}
	
	.el-menu>li {
		width: 100%;
		text-align: center;
		height: 45px;
		line-height: 45px;
	}
	
	.fenyebtn>div {
		float: left;
		margin-left: 15px;
		margin-right: 35px;
		width: 100px;
		color: white;
		padding: 15px 35px;
		background-color: rgb(255, 255, 255, 0);
		-webkit-box-shadow: inset 0 0 20px white;
		-moz-box-shadow: inset 0 0 20px white;
		box-shadow: inset 0 0 20px white;
		cursor: pointer;
	}
	
	.fenyebtn>div:hover {
		-webkit-box-shadow: inset 0 0 10px white;
		-moz-box-shadow: inset 0 0 10px white;
		box-shadow: inset 0 0 10px white;
	}
</style>